<template>
  <sub-page class="introduction">
    <content-header>
      <img src="@/assets/image/icon/cityPartner/headerBackground.png" alt="" />
    </content-header>
    <main-card>
      <div class="example blue-background">样例</div>
      <card-top-info title="合伙人收益明细">
        <span class="blue-text" style="margin-right: 18px">成为合伙人，每个月完成固定场次，享受1-2级团队收益8%的合伙人奖励</span>
      </card-top-info>
      <my-table class="my-table" style="height: 100%">
        <el-table :data="tableData" header-row-class-name="table-header" style="width: 100%">
          <el-table-column label="编号" header-align="center" align="center" min-width="80" class-name="column-header">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="avatar,name" label="姓名" header-align="center" align="center" min-width="80">
            <template slot-scope="scope">
              <el-avatar :size="22" :src="scope.row.avatar"></el-avatar>
              <span style="margin-left: 5px; width: 60px; display: inline-block; text-align: centr">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="电话" header-align="center" align="center" min-width="80"> </el-table-column>
          <el-table-column prop="inviteNumber" header-align="center" align="center" label="邀请人数"> </el-table-column>
          <el-table-column prop="date" header-align="center" align="center" label="加入时间" min-width="130"> </el-table-column>
          <!-- <el-table-column prop="shares" header-align="center" align="center" label="持股数"> </el-table-column> -->
          <el-table-column prop="totalProfit" header-align="center" align="center" label="总收益"> </el-table-column>
        </el-table>
      </my-table>
      <div class="join-button blue-background" @click="openInfoBox('', windowWeChat, { center: true })">立即加入</div>
    </main-card>
  </sub-page>
</template>

<script>
import SubPage from '@/components/subPage';
import ContentHeader from '@/layout/home/components/header/contentHeader';
import MainCard from '@/components/mainCard';
import CardTopInfo from '@/components/cardTopInfo';
import MyTable from '@/components/myTable';
import messageBoxMixin from '@/mixins/messageBoxMixin';

export default {
  mixins: [messageBoxMixin],
  name: 'cityPartnerIntroduction',
  components: { MyTable, CardTopInfo, MainCard, ContentHeader, SubPage },
  computed: {
    windowWeChat() {
      const c = this.$createElement;
      const img = require('../../../assets/image/assist.png');
      console.log(img);
      return c('div', null, [
        c('img', {
          attrs: { src: img },
          style: 'width:100%',
        }),
        c('span', null, '立即加入'),
      ]);
    },
  },
  data() {
    return {
      tableData: [],
      // tableData: [
      //   {
      //     name: '马智宇',
      //     avatar: 'http://ustatic.joymew.com/emcee/partner/mazhiyu.jpg',
      //     phone: '187*****368',
      //     date: '2020-11-18',
      //     inviteNumber: '892',
      //     // shares: '123',
      //     totalProfit: '81021.2',
      //   },
      //   {
      //     name: '林欣',
      //     avatar: 'http://ustatic.joymew.com/emcee/partner/linxi.jpg',
      //     phone: '157*****269',
      //     date: '2020-11-18',
      //     inviteNumber: '1027',
      //     // shares: '123',
      //     totalProfit: '119310.9',
      //   },
      //   {
      //     name: '贾金奎',
      //     avatar: 'http://ustatic.joymew.com/emcee/partner/jiajinkui.jpg',
      //     phone: '181*****336',
      //     date: '2020-11-18',
      //     inviteNumber: '872',
      //     // shares: '123',
      //     totalProfit: '71021.6',
      //   },
      //   {
      //     name: '王纲 ',
      //     avatar: 'http://ustatic.joymew.com/emcee/partner/wanggang.jpg',
      //     phone: '188*****987',
      //     date: '2020-11-18',
      //     inviteNumber: '2091',
      //     // shares: '123',
      //     totalProfit: '188903.6',
      //   },
      //   {
      //     name: '叶知秋',
      //     avatar: 'http://ustatic.joymew.com/emcee/partner/yezhiqiu.jpg',
      //     phone: '138*****090',
      //     date: '2020-11-18',
      //     inviteNumber: '4812',
      //     // shares: '123',
      //     totalProfit: '420985.1',
      //   },
      //   {
      //     name: '胡白 ',
      //     avatar: 'http://ustatic.joymew.com/emcee/partner/hubai.jpg',
      //     phone: '188*****881',
      //     date: '2020-11-18',
      //     inviteNumber: '2181',
      //     // shares: '123',
      //     totalProfit: '239853.9',
      //   },
      //   {
      //     name: '贾有才',
      //     avatar: 'http://ustatic.joymew.com/emcee/partner/jiayoucai.jpg',
      //     phone: '156*****228',
      //     date: '2020-11-18',
      //     inviteNumber: '2982',
      //     // shares: '123',
      //     totalProfit: '302913.3',
      //   },
      //   {
      //     name: '邵晨东',
      //     avatar: 'http://ustatic.joymew.com/emcee/partner/shaochendong.png',
      //     phone: '138*****662',
      //     date: '2020-11-18',
      //     inviteNumber: '1956',
      //     // shares: '123',
      //     totalProfit: '180942.8',
      //   },
      //   {
      //     name: '张晓光',
      //     avatar: 'http://ustatic.joymew.com/emcee/partner/zhangxiaoguang.jpg',
      //     phone: '159*****789',
      //     date: '2020-11-18',
      //     inviteNumber: '2029',
      //     // shares: '123',
      //     totalProfit: '242198.3',
      //   },
      //   {
      //     name: '王瑱 ',
      //     avatar: 'http://ustatic.joymew.com/emcee/partner/wangzhen.jpg',
      //     phone: '172*****371',
      //     date: '2020-11-18',
      //     inviteNumber: '1690',
      //     // shares: '123',
      //     totalProfit: '18832',
      //   },
      //   // {
      //   //   name: '石方',
      //   //   avatar: 'https://www.emiya.com.cn/media/avatar/123.jpg',
      //   //   phone: '13312345678',
      //   //   date: '2017-10-31  23:12:00',
      //   //   inviteNumber: '789',
      //   //   // shares: '123',
      //   //   totalProfit: '345',
      //   // },
      //   // {
      //   //   name: '石方',
      //   //   avatar: 'https://www.emiya.com.cn/media/avatar/123.jpg',
      //   //   phone: '13312345678',
      //   //   date: '2017-10-31  23:12:00',
      //   //   inviteNumber: '789',
      //   //   // shares: '123',
      //   //   totalProfit: '345',
      //   // },
      //   // {
      //   //   name: '石方',
      //   //   avatar: 'https://www.emiya.com.cn/media/avatar/123.jpg',
      //   //   phone: '13312345678',
      //   //   date: '2017-10-31  23:12:00',
      //   //   inviteNumber: '789',
      //   //   // shares: '123',
      //   //   totalProfit: '345',
      //   // },
      //   // {
      //   //   name: '石方',
      //   //   avatar: 'https://www.emiya.com.cn/media/avatar/123.jpg',
      //   //   phone: '13312345678',
      //   //   date: '2017-10-31  23:12:00',
      //   //   inviteNumber: '789',
      //   //   // shares: '123',
      //   //   totalProfit: '345',
      //   // },
      //   // {
      //   //   name: '石方',
      //   //   avatar: 'https://www.emiya.com.cn/media/avatar/123.jpg',
      //   //   phone: '13312345678',
      //   //   date: '2017-10-31  23:12:00',
      //   //   inviteNumber: '789',
      //   //   // shares: '123',
      //   //   totalProfit: '345',
      //   // },
      //   // {
      //   //   name: '石方',
      //   //   avatar: 'https://www.emiya.com.cn/media/avatar/123.jpg',
      //   //   phone: '13312345678',
      //   //   date: '2017-10-31  23:12:00',
      //   //   inviteNumber: '789',
      //   //   // shares: '123',
      //   //   totalProfit: '345',
      //   // },
      //   // {
      //   //   name: '石方',
      //   //   avatar: 'https://www.emiya.com.cn/media/avatar/123.jpg',
      //   //   phone: '13312345678',
      //   //   date: '2017-10-31  23:12:00',
      //   //   inviteNumber: '789',
      //   //   // shares: '123',
      //   //   totalProfit: '345',
      //   // },
      // ],
    };
  },
};
</script>

<style lang="less" scoped>
.introduction {
  .join-button {
    margin: auto;
    margin-bottom: 26px;
    width: 136px;
    height: 40px;
    border-radius: 4px;
    .hvCenter();
    font-weight: 500;
    font-size: 19px;
    cursor: pointer;
  }
  .content-header {
    padding: 20px;
    img {
      width: 100%;
    }
  }
  .main-card {
    .example {
      .hvCenter();
      margin-left: 21px;
      width: 82px;
      height: 26px;
      border-radius: 0 0 5px 5px;
      font-size: 13px;
      font-weight: 500;
      color: #ffffff;
      line-height: 19px;
    }
  }
}
</style>
